'use client'

import { useState, useRef } from 'react'
import { ReviewForm } from '@/components/reviews/review-form'
import { ReviewList } from '@/components/reviews/review-list'
import { ReviewStats } from '@/components/reviews/review-stats'

interface ToolDetailWrapperProps {
  toolId: string
}

export function ToolDetailWrapper({ toolId }: ToolDetailWrapperProps) {
  const [refreshKey, setRefreshKey] = useState(0)
  const reviewListRef = useRef<{ refreshReviews: () => void }>(null)

  const handleReviewAdded = () => {
    // 触发评价列表刷新
    setRefreshKey(prev => prev + 1)
    if (reviewListRef.current?.refreshReviews) {
      reviewListRef.current.refreshReviews()
    }
  }

  return (
    <div className="space-y-6">
      {/* 评价统计 */}
      <ReviewStats toolId={toolId} key={refreshKey} />

      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        {/* 评价表单 */}
        <div>
          <ReviewForm
            toolId={toolId}
            onReviewAdded={handleReviewAdded}
          />
        </div>

        {/* 评价列表 */}
        <div>
          <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
            <h3 className="text-lg font-semibold text-gray-900 mb-4">用户评价</h3>
            <ReviewList
              key={refreshKey}
              toolId={toolId}
              ref={reviewListRef}
            />
          </div>
        </div>
      </div>
    </div>
  )
}
